<template>
    <view class="wrap">
        <view class="item">
            <view class="title"> 主色调 </view>
            <view class="color-box">
                <view class="color-item" style="background: #2979ff">
                    <view class="color-title"> Primary </view>
                    <view class="color-value"> #2979ff </view>
                </view>
                <view class="color-item" style="background: #2b85e4">
                    <view class="color-title"> Dark </view>
                    <view class="color-value"> #2b85e4 </view>
                </view>
                <view class="color-item" style="background: #a0cfff">
                    <view class="color-title"> Disabled </view>
                    <view class="color-value"> #a0cfff </view>
                </view>
                <view class="color-item" style="background: #ecf5ff; color: #909399">
                    <view class="color-title"> Light </view>
                    <view class="color-value"> #ecf5ff </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> Error </view>
            <view class="color-box">
                <view class="color-item" style="background: #fa3534">
                    <view class="color-title"> Error </view>
                    <view class="color-value"> #fa3534 </view>
                </view>
                <view class="color-item" style="background: #dd6161">
                    <view class="color-title"> Dark </view>
                    <view class="color-value"> #dd6161 </view>
                </view>
                <view class="color-item" style="background: #fab6b6">
                    <view class="color-title"> Disabled </view>
                    <view class="color-value"> #fab6b6 </view>
                </view>
                <view class="color-item" style="background: #fef0f0; color: #909399">
                    <view class="color-title"> Light </view>
                    <view class="color-value"> #fef0f0 </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> Warning </view>
            <view class="color-box">
                <view class="color-item" style="background: #ff9900">
                    <view class="color-title"> Warning </view>
                    <view class="color-value"> #ff9900 </view>
                </view>
                <view class="color-item" style="background: #f29100">
                    <view class="color-title"> Dark </view>
                    <view class="color-value"> #f29100 </view>
                </view>
                <view class="color-item" style="background: #fcbd71">
                    <view class="color-title"> Disabled </view>
                    <view class="color-value"> #fcbd71 </view>
                </view>
                <view class="color-item" style="background: #fdf6ec; color: #909399">
                    <view class="color-title"> Light </view>
                    <view class="color-value"> #fdf6ec </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> Info </view>
            <view class="color-box">
                <view class="color-item" style="background: #909399">
                    <view class="color-title"> Info </view>
                    <view class="color-value"> #909399 </view>
                </view>
                <view class="color-item" style="background: #82848a">
                    <view class="color-title"> Dark </view>
                    <view class="color-value"> #82848a </view>
                </view>
                <view class="color-item" style="background: #c8c9cc">
                    <view class="color-title"> Disabled </view>
                    <view class="color-value"> #c8c9cc </view>
                </view>
                <view class="color-item" style="background: #f4f4f5; color: #909399">
                    <view class="color-title"> Light </view>
                    <view class="color-value"> #f4f4f5 </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> Success </view>
            <view class="color-box">
                <view class="color-item" style="background: #19be6b">
                    <view class="color-title"> Success </view>
                    <view class="color-value"> #19be6b </view>
                </view>
                <view class="color-item" style="background: #18b566">
                    <view class="color-title"> Dark </view>
                    <view class="color-value"> #18b566 </view>
                </view>
                <view class="color-item" style="background: #71d5a1">
                    <view class="color-title"> Disabled </view>
                    <view class="color-value"> #71d5a1 </view>
                </view>
                <view class="color-item" style="background: #dbf1e1; color: #909399">
                    <view class="color-title"> Light </view>
                    <view class="color-value"> #dbf1e1 </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> 文字颜色 </view>
            <view class="color-box">
                <view class="color-item" style="background: #303133">
                    <view class="color-title"> 主要文字 </view>
                    <view class="color-value"> #303133 </view>
                </view>
                <view class="color-item" style="background: #606266">
                    <view class="color-title"> 常规文字 </view>
                    <view class="color-value"> #606266 </view>
                </view>
                <view class="color-item" style="background: #909399">
                    <view class="color-title"> 次要文字 </view>
                    <view class="color-value"> #909399 </view>
                </view>
                <view class="color-item" style="background: #c0c4cc">
                    <view class="color-title"> 占位文字 </view>
                    <view class="color-value"> #c0c4cc </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> 边框颜色 </view>
            <view class="color-box">
                <view class="color-item" style="background: #dcdfe6; color: #909399">
                    <view class="color-title"> 一级边框 </view>
                    <view class="color-value"> #dcdfe6 </view>
                </view>
                <view class="color-item" style="background: #e4e7ed; color: #909399">
                    <view class="color-title"> 二级边框 </view>
                    <view class="color-value"> #e4e7ed </view>
                </view>
                <view class="color-item" style="background: #ebeef5; color: #909399">
                    <view class="color-title"> 三级边框 </view>
                    <view class="color-value"> #ebeef5 </view>
                </view>
                <view class="color-item" style="background: #f2f6fc; color: #909399">
                    <view class="color-title"> 四级边框 </view>
                    <view class="color-value"> #f2f6fc </view>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="title"> 背景颜色 </view>
            <view class="color-box">
                <view class="color-item" style="background: #f3f4f6; color: #909399">
                    <view class="color-title"> 背景颜色 </view>
                    <view class="color-value"> #f3f4f6 </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

onMounted(() => {});
</script>

<style lang="scss" scoped>
.wrap {
    padding: 18rpx;
}

.item {
    margin: 30rpx 0;
    margin-top: 44rpx;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    .title {
        font-size: 30rpx;
        position: relative;
        line-height: 1;
        padding-left: 22rpx;

        &:before {
            width: 4px;
            height: 15px;
            border-radius: 100rpx;
            background-color: $u-content-color;
            content: '';
            position: absolute;
            left: 6rpx;
            top: -1px;
        }
    }

    .color-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        text-align: center;
        margin-top: 20rpx;

        .color-item {
            display: flex;
            flex: 1;
            margin: 0 8rpx;
            flex-direction: column;
            border-radius: 6rpx;
            padding: 12rpx 0;
        }

        .color-title {
            font-size: 28rpx;
        }

        .color-value {
            font-size: 24rpx;
        }
    }
}
</style>
